<template>
    <div class="main">
        <el-card class="search-box">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
              <el-form-item label="门店名称" prop="storeName">
                <el-input
                  v-model="queryParams.storeName"
                  placeholder="请输入门店名称"
                  clearable
                  @keyup.enter.native="getList"
                />
              </el-form-item>
              <el-form-item label="门店等级" prop="grade">
                <el-select
                v-model="queryParams.grade"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in shopGradeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              </el-form-item>
              <el-form-item label="创建时间" prop="time">
                <el-date-picker
                v-model="value"
                  @change="selectTime"
                  format="yyyy-MM-dd HH:mm:ss" 
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="mini"
                  @click="getList"
                  >查询</el-button
                >
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>
          </el-card>
          <el-card class="table-box">
            <el-table
              :data="tableData"
              v-loading="loading"
              :header-cell-style="{
                background: '#f5f7fa',
                color: '#000000',
              }"
              style="width: 100%"
            >
              <el-table-column prop="storeName" label="门店名称"> </el-table-column>
              <el-table-column prop="grade" label="门店级别"> </el-table-column>
              <el-table-column prop="detailAddress" label="门店地址"> </el-table-column>
              <el-table-column prop="directorName" label="联系人"> </el-table-column>
              <el-table-column prop="directorPhone" label="联系电话"> </el-table-column>
              <el-table-column prop="relateUser" label="关联用户账号"> </el-table-column>
              <el-table-column prop="createTime" label="创建时间"> </el-table-column>
              <el-table-column prop="edit" label="操作" width="300"> 
                <template slot-scope="scope">
                  <el-button  size="mini" type="success" @click="goDetails(scope.row.id)">查看</el-button>
                  <el-button  size="mini" type="primary" @click="handleUpdate(scope.row.id)">
                    编辑
                    <!-- {{scope.row.state}} -->
                  </el-button>
                  
                  <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNumber" :limit.sync="queryParams.pageSize" @pagination="getList" />
          </el-card>
          <el-dialog
      title="提示"
      :visible.sync="dialogVisibleClose"
      width="30%"
      :before-close="handleDeleteClose">
      <span>确定进行删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleClose = false">取 消</el-button>
        <el-button type="primary" @click="submitDelete()">确 定</el-button>
      </span>
    </el-dialog>
    </div>
</template>

<script>
import {queryStoreList,deleteStore,getStoreGrade} from '@/api/shop'
import Pagination from '@/components/Pagination'
export default {
  name: '',
  components: {Pagination},
  props: {},
  data() {
    return {
      dialogVisibleClose:false,
        queryParams:{
            pageNumber:1,
            pageSize:10,
            startTime:'',
            endTime:'',
            grade:'',
            storeName: ''
        },
        value:'',
        loading:true,
        total: 0,
        tableData:[],
        shopGradeList:[],
        storeId:null
    }
  },
  watch: {},
  computed: {},
  methods: {
        async getList(){
            const res = await queryStoreList(this.queryParams);
            this.loading =false
            this.tableData = res.data.list
            this.total = res.data.total
        },
        selectTime(val){
            this.queryParams.startTime = val[0]+''
            this.queryParams.endTime = val[1]+''
        },
        resetQuery() {
            this.queryParams={
                pageNumber:1,
                pageSize:10,
                startTime:'',
                endTime:'',
                grade:'',
                storeName: ''
            }
            this.getList()
        },
        handleDelete(storeId){
          this.dialogVisibleClose = true
          this.storeId = storeId
        },
        handleDeleteClose(){
          this.dialogVisibleClose = false
        },
        submitDelete(){
          deleteStore(this.storeId).then(res=>{
            if(res.code == 200){
              this.$message({
                message: res.message,
                type: 'success'
              });
              this.getList()
              this.dialogVisibleClose = false
            }
          })
        },
        handleUpdate(storeId){
          this.$router.push({path:'/shop/edit-shop',query: {storeId}})
        },
        goDetails(storeId){
          this.$router.push({path:'/shop/details-shop',query: {storeId}})
        },
        async getShopGradeList() {
          const res = await getStoreGrade();
          let dataNew = []; //新数组
          res.data.map((item) => {
            let obj = {
              value: item.gradeValue,
              label: item.gradeName,
            };
            dataNew.push(obj);
          });
          this.shopGradeList = dataNew;
        },
      },
  created() {
    this.getList()
    this.getShopGradeList();
  },
  mounted() {}
}
</script>

<style lang="less" scoped>

</style>